<template>
	<div class="user-info">
		<div class="img"><span class="img">头像<span></div>
		<div>
			<span><b>{{name}}</b></span>
			<span>{{introduction}}</span>
		</div>
	</div>
</template>
<script>
	export default {
		data: function () {
			return {
				info: {
					name: 'test',
					introduction: '123'
				}
			}
		},
		props: ['name', 'introduction']
	}
</script>
<style scoped>
	.user-info {
		display: flex;
		padding-left: 25px;
		margin-top:15px;
	}
	.user-info>div:nth-child(2) {
		flex: 1;
	}
	.user-info>div:nth-child(2)>span:nth-child(1) {
		font-size: 2.5rem;
	}
	.user-info>div:nth-child(2)>span:nth-child(2) {
		font-size: 1rem;
	}
	.user-info>div:nth-child(1) {
		height: 7rem;
		width: 7rem;
		background-color: yellow;
		text-align: center;
	}
	.user-info>div:nth-child(1)>span {
		line-height: 7rem;
	}
	div:nth-child(2)>span {
		padding: 5px 0px 5px 15px;
		display: block;
	}
</style>